﻿
@{
    //Layout = null;
    //ViewData["Title"] = "用户管理";
}

@section CSS{
    <style>

    </style>
}

<div class="page-nav">首页 > 用户管理</div>
<div class="page-body">
    <div class="page-title"><i class="layui-icon layui-icon-rate-solid"></i><h2>用户管理</h2></div>
    <hr class="layui-bg-gray">

    <div class="page-quote">
        <blockquote class="layui-elem-quote">当前页面用于查询和管理用户信息。</blockquote>
    </div>

    <div class="page-query">
        <form class="layui-form">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="" class="layui-input" autocomplete="off" id="tbUserName">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="" class="layui-input" autocomplete="off" id="tbTrueName">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <select lay-search="" id="selectDept">
                        <option value="">全部</option>
                        @if (ViewBag.DeptList != null)
                        {
                            foreach (var li in ViewBag.DeptList)
                            {
                                <option value="@li.Id">@li.Name</option>
                            }
                        }
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <select lay-filter="aihao" id="selectStatus">
                        <option value="">全部</option>
                        <option value="0">启用</option>
                        <option value="1">禁用</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" onclick="UserList.query()">查询</button>
                </div>
            </div>
        </form>
    </div>

    @*<hr class="layui-bg-gray">*@
<div class="page-tool">
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="UserList.add()">
            <i class="layui-icon">&#xe608;</i> 添加
        </button>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
            <i class="layui-icon">&#xe681;</i> 导入
        </button>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
            <i class="layui-icon">&#xe601;</i> 导出
        </button>
    </div>
</div>
    <div class="page-list">
        <table id="table-list" lay-filter="tableList"></table>
    </div>
</div>

<script type="text/html" id="barTool">
    {{# if(d.statusName=="启用"){}}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disable">禁用</a>
    {{# } else if(d.statusName=="禁用"){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="enable">启用</a>
    {{# }}}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
    @*<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>*@
    <button class="layui-btn layui-btn-xs" lay-filter="" lay-dropdown="{align:'left', menus: [{layIcon:'',txt: '重置密码', event:'updatePwd'},{layIcon:'',txt: '分配角色', event:'assignRole'},{layIcon:'',txt: '分配权限', event:'assignModule'}, {layIcon: '',txt: '删除', event:'del'}]}">
        <span>操作</span>
        <i class="layui-icon layui-icon-triangle-d"></i>
    </button>
</script>



@section Scripts{
    <script>
        var UserList = function () {
            let inited = false;
            let data = {};
            var table;

            function initData() {
                layui.use(['form', 'layer', 'table'], function () {
                    //加载数据
                    loadData();

                    //给工具条注册点击事件
                    layui.table.on('tool(tableList)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                        var id = obj.data.id;
                        //layer.msg(id);

                        if (obj.event === 'del') {
                            layer.confirm('确认删除该数据？', function (index) {
                                //开启loading
                                layer = layui.layer;
                                var indexLoad = layer.load(3, { shade: 0.3, zIndex: 19891017 });

                                $.ajax({
                                    url: "/User/DeleteUser",
                                    type: "post",
                                    data: { id: id },
                                    //async: false,
                                    success: function (data) {
                                        layer.close(index);
                                        if (data.state == 1) {
                                            parent.layer.msg("删除成功", { shade: 0.1, icon: 1 });
                                        } else if (data.state == 0) {
                                            parent.layer.open({
                                                title: '提示'
                                                , content: "删除失败 " + data.msg
                                                , shade: 0.4
                                                , icon: 5
                                            });
                                        } else {
                                            parent.layer.open({
                                                title: '提示'
                                                , content: "删除异常 " + data.msg
                                                , shade: 0.4
                                                , icon: 2
                                            });
                                        }
                                        layui.table.reload('table-list');
                                        layer.close(indexLoad);
                                    },
                                    error: function (xhr, state, errorThrown) {
                                        layer.close(index);
                                        layui.table.reload('table-list');
                                        layer.msg("删除失败 " + errorThrown, { shade: 0.1, icon: 2 });
                                        layer.close(indexLoad);
                                    }
                                });

                            });
                        } else if (obj.event === 'edit') {
                            layer.open({
                                type: 2,
                                title: '编辑用户',
                                area: ['800px', '410px'],
                                content: ["/User/UpdateUser?id=" + id]
                            });
                        } else if (obj.event === 'assignRole') {//分配角色
                            layer.open({
                                type: 2,
                                title: '分配角色',
                                area: ['450px', '480px'],
                                content: ["/User/AssignUserRole?id=" + id]
                            });
                        } else if (obj.event === 'assignModule') {//分配权限
                            layer.open({
                                type: 2,
                                title: '分配权限',
                                area: ['450px', '580px'],
                                content: ["/User/AssignUserModule?id=" + id]
                            });
                        } else if (obj.event === 'updatePwd') {//重置密码
                            layer.open({
                                type: 2,
                                title: '重置密码',
                                area: ['450px', '270px'],
                                content: ["/User/RetsetPassword?id=" + id]
                            });
                        } else if (obj.event === 'enable') {//启用
                            layer.confirm('确认启用该用户？', function (index) {
                                //开启loading
                                layer = layui.layer;
                                var indexLoad = layer.load(3, { shade: 0.3, zIndex: 19891017 });

                                $.ajax({
                                    url: "/User/EnableUser",
                                    type: "post",
                                    data: { id: id },
                                    //async: false,
                                    success: function (data) {
                                        layer.close(index);
                                        if (data.state == 1) {
                                            parent.layer.msg("启用成功", { shade: 0.1, icon: 1 });
                                        } else if (data.state == 0) {
                                            parent.layer.open({
                                                title: '提示'
                                                , content: "启用失败 " + data.msg
                                                , shade: 0.4
                                                , icon: 5
                                            });
                                        } else {
                                            parent.layer.open({
                                                title: '提示'
                                                , content: "启用异常 " + data.msg
                                                , shade: 0.4
                                                , icon: 2
                                            });
                                        }
                                        layui.table.reload('table-list');
                                        layer.close(indexLoad);
                                    },
                                    error: function (xhr, state, errorThrown) {
                                        layer.close(index);
                                        layui.table.reload('table-list');
                                        layer.msg("启用失败 " + errorThrown, { shade: 0.1, icon: 2 });
                                        layer.close(indexLoad);
                                    }
                                });

                            });
                        } else if (obj.event === 'disable') {//禁用
                            layer.confirm('确认禁用该用户？', function (index) {
                                //开启loading
                                layer = layui.layer;
                                var indexLoad = layer.load(3, { shade: 0.3, zIndex: 19891017 });

                                $.ajax({
                                    url: "/User/DisableUser",
                                    type: "post",
                                    data: { id: id },
                                    //async: false,
                                    success: function (data) {
                                        layer.close(index);
                                        if (data.state == 1) {
                                            parent.layer.msg("禁用成功", { shade: 0.1, icon: 1 });
                                        } else if (data.state == 0) {
                                            parent.layer.open({
                                                title: '提示'
                                                , content: "禁用失败 " + data.msg
                                                , shade: 0.4
                                                , icon: 5
                                            });
                                        } else {
                                            parent.layer.open({
                                                title: '提示'
                                                , content: "禁用异常 " + data.msg
                                                , shade: 0.4
                                                , icon: 2
                                            });
                                        }
                                        layui.table.reload('table-list');
                                        layer.close(indexLoad);
                                    },
                                    error: function (xhr, state, errorThrown) {
                                        layer.close(index);
                                        layui.table.reload('table-list');
                                        layer.msg("禁用失败 " + errorThrown, { shade: 0.1, icon: 2 });
                                        layer.close(indexLoad);
                                    }
                                });

                            });
                        }


                    });
                });

                ////导航 依赖 element 模块
                //layui.use('element', function () {
                //    var element = layui.element;
                //});

                layui.config({
                    base: '/lib/layui-ext/'
                }).use(['dropdown'], function () {
                    var dropdown = layui.dropdown;
                    // 监听菜单点击
                    dropdown.onFilter('test1', function (event) {
                        // ...业务代码
                    })
                });
            }

            function loadData() {
                //获取查询关键字
                var userName = $("#tbUserName").val();
                var trueName = $("#tbTrueName").val();
                var dept = $("#selectDept").val();
                var status = $("#selectStatus").val();

                layui.table.render({
                    elem: '#table-list'
                    , height: 670
                    , url: '/User/GetUserList' //数据接口
                    , where: { userName: userName, trueName: trueName, deptId: dept, status: status }
                    , page: true //开启分页
                    , limit: 15
                    , cols: [[ //表头
                        { field: 'id', title: 'ID', width: 70, sort: true }
                        , { field: 'userName', title: '用户名', width: 120 }
                        , { field: 'trueName', title: '姓名', width: 120 }
                        , { field: 'deptName', title: '部门', width: 120 }
                        , { field: 'phone', title: '电话', width: 160 }
                        , { field: 'email', title: 'Email' }
                        , {
                            field: 'createTime', title: '创建时间', width: 180, templet: function (d) {
                                return layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
                            }
                        }
                        , {
                            field: 'statusName', title: '状态', width: 80, templet: function (d) {
                                if (d.statusName == "启用") {
                                    return '<span class="tip-green">启用</span>';
                                }
                                else if (d.statusName == "禁用") {
                                    return '<span class="tip-red">禁用</span>';
                                }
                                return d.statusName;
                            }
                        }
                        , { field: '', title: '操作', width: 200, align: 'center', toolbar: '#barTool' }
                        //, {
                        //    field: 'id', title: '操作', width: 200, templet: function (d) {
                        //        var html = '<ul class="layui-nav layui-bg-green btnz" lay-filter="nav'+d.id+'" style="font-size: 12px;border-radius: 0px;float: right;padding:0px 0px 0px 0px;margin-left: 2px;">';
                        //        html += '<li class="layui-nav-item" style = "line-height: 30px;font-size: 12px;" >';
                        //        html += '<a href="javascript:;" style="color:white;font-size: 12px;padding: 0px 30px 0px 20px;">更多<span class="layui-nav-more" style="right: 10px;font-size: 12px;"></span></a>';
                        //        html += '<dl class="layui-nav-child" style="line-height: 31px;padding: 0px 0px 0px 0px;">';
                        //        html += '<dd><button class="layui-btn layui-btn layui-btn-sm layui-btn-fluid" id="btn_cjb">创建表</button></dd>';
                        //        html += '<dd><button class="layui-btn layui-btn layui-btn-sm layui-btn-fluid" id="btn_cjb">修改表</button></dd>';
                        //        html += '</dl>';
                        //        html += '</li>';
                        //        html += '</ul>';
                        //        if (d.id == 1)
                        //            return html;
                        //        else
                        //            return '';
                        //    }
                        //}
                    ]]
                    , done: function () {//请求数据完成时，关闭加载loading
                        layui.dropdown.suite();//渲染下拉按钮
                    }

                });


            }

            return {
                init() {//初始化
                    if (!inited) {
                        initData();
                        inited = true;
                    }
                },
                query() {//查询
                    loadData();
                },
                add() {//添加
                    layer.open({
                        type: 2,
                        title: '添加用户',
                        area: ['800px', '410px'],
                        content: ["/User/AddUser"]
                    });
                }
            };
        }();
        UserList.init();
    </script>
}